<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="分类管理" name="first">
		<div style="float: right;margin-right:2%;">
		  <el-button style='margin: 10px 0;' :disabled="!isAuth('materialsList:add')" size="mini" type="primary" icon="document" @click="addNotice">添加分类</el-button>
		</div>
		<el-table
		v-loading="tableDataLoading"
		  :data="tableData">
		  <el-table-column
		     fixed
			 prop="id"
			 label="编号"
			 width="80">
		   </el-table-column>
		 <el-table-column
			prop="classifyName"
			label="分类名称">
		  </el-table-column>
		  <el-table-column
			 prop="remark"
			 label="备注">
		   </el-table-column>
		  <el-table-column
			prop="createTime"
			label="创建时间">
		  </el-table-column>
		  <el-table-column
		    label="操作"
			width="150">
		    <template slot-scope="scope">
		      <el-button
		        size="mini"
		        type="primary"
						:disabled="!isAuth('materialsList:update')"
		        @click="updates(scope.$index, scope.row)">编辑
		      </el-button>
		      <el-button
		        size="mini"
		        type="danger"
						:disabled="!isAuth('materialsList:delete')"
		        @click="deletes(scope.row)">删除
		      </el-button>
		    </template>
		  </el-table-column>
		</el-table>
		<div style="text-align: center;margin-top: 10px;">
		  <el-pagination
		    @size-change="handleSizeChange"
		    @current-change="handleCurrentChange"
		    :page-sizes="[5, 10, 15, 20]"
		    :page-size="size"
		    :current-page="page"
		    layout="total,sizes, prev, pager, next"
		    :total="tableData.length">
		  </el-pagination>
		</div>
		<!-- 添加弹框 -->
		<el-dialog title="添加分类" :visible.sync="dialogFormVisible" center>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">分类名称：</span>
				<el-input style="width:50%;" v-model="classifyName" placeholder="请输入分类名称"></el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">备注：</span>
				<el-input style="width: 50%;" v-model="remark" placeholder="请输入备注"></el-input>
			</div>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="releasNoticeTo()">确 定</el-button>
		  </div>
		</el-dialog>
		<!-- 修改弹框 -->
		<el-dialog title="修改分类" :visible.sync="dialogFormVisible1" center>
			<el-form :model="form">
			  <el-form-item label="分类名称：" :label-width="formLabelWidth" >
			    <el-input v-model="form.classifyName" style="width:65%;"></el-input>
			  </el-form-item>
			  <el-form-item label="备注：" :label-width="formLabelWidth" >
			    <el-input v-model="form.remark" style="width:65%;"></el-input>
			  </el-form-item>
			</el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
		    <el-button type="primary" @click="amendNoticeTo()">确 定</el-button>
		  </div>
		</el-dialog>
	</el-tab-pane>
    <el-tab-pane label="文章管理" name="second">
		<div style="float: right;margin-right:2%;">
		  <el-button style='margin: 10px 0;height:35px;' :disabled="!isAuth('materialsList:add')" size="mini" type="primary" icon="document" @click="addNoticewz">添加文章</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
		  <el-select v-model="classifyId" placeholder="请选择类型" style="width:150px;" @change="articleSelect(classifyId)">
		    <el-option v-for="(item,index) in classifyIds" :key="item.index" :label="item.classifyName" :value="item.id">
		    </el-option>
		  </el-select>
		</div>
		<el-table
		v-loading="tableDataLoading"
		  :data="tableData">
		<el-table-column
		  fixed
		 prop="id"
		 label="编号"
		 width="80">
		 </el-table-column>
		 <el-table-column
			prop="title"
			label="标题"
			width="120">
		  </el-table-column>
		  <el-table-column
			 prop="articleUrl"
			 label="链接">
		   </el-table-column>
		   <el-table-column
			 prop="picture"
			 label="图片">
			 <template slot-scope="scope">
				 <img :src="scope.row.picture" alt="" width="60" height="60">
			 </template>
			</el-table-column>
			<el-table-column
			 prop="content"
			 label="内容">
			 </el-table-column>
		  <el-table-column
			prop="createTime"
			label="创建时间"
			width="160">
		  </el-table-column>
		  <el-table-column
			label="操作">
			<template slot-scope="scope">
			  <el-button
				size="mini"
				type="primary"
				:disabled="!isAuth('materialsList:update')"
				@click="updateswz(scope.$index, scope.row)">编辑
			  </el-button>
			  <el-button
				size="mini"
				type="danger"
				:disabled="!isAuth('materialsList:delete')"
				@click="deleteswz(scope.row)">删除
			  </el-button>
			</template>
		  </el-table-column>
		</el-table>
		<div style="text-align: center;margin-top: 10px;">
		  <el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="size"
			:current-page="page"
			layout="total,sizes, prev, pager, next"
			:total="tableData.length">
		  </el-pagination>
		</div>
		<!-- 添加弹框 -->
		<el-dialog title="添加文章" :visible.sync="dialogFormVisible2" center>
			<div style="margin-bottom: 10px;display: flex;">
				<span style="width: 200px;display: inline-block;text-align: right;">文章图片：</span>
				<div style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
					<el-upload
						class="avatar-uploader"
						v-model="picture"
						action="https://admin.koudaidj.com/game/alioss/upload"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						>
						<img v-if="picture" :src="picture" class="avatar" style="border-radius: 6px;width: 148px;height: 148px;"/>
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">文章标题：</span>
				<el-input style="width: 50%;" v-model="title" placeholder="请输入文章标题"></el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">跳转链接：</span>
				<el-input style="width: 50%;" v-model="articleUrl" placeholder="请输入跳转链接"></el-input>
			</div>
			<div style="margin-bottom: 10px;p">
				<span style="width: 200px;display: inline-block;text-align: right;position: relative;top: -65px;">文章内容：</span>
				<el-input style="width: 50%;" type="textarea" rows="4" v-model="content" placeholder="请输入内容"></el-input>
			</div>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
		    <el-button type="primary" @click="releasNoticeTowz()">确 定</el-button>
		  </div>
		</el-dialog>
		<!-- 修改弹框 -->
		<el-dialog title="修改文章" :visible.sync="dialogFormVisible3" center>
			<el-form :model="form">
				<el-form-item label="文章图片：" :label-width="formLabelWidth" >
				 <div style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
				 	<el-upload
				 		class="avatar-uploader"
				 		v-model="picture"
				 		action="https://admin.koudaidj.com/game/alioss/upload"
				 		:show-file-list="false"
				 		:on-success="handleAvatarSuccess2"
				 		>
				 		<img v-if="formwz.picture" :src="formwz.picture" class="avatar" style="border-radius: 6px;width: 148px;height: 148px;"/>
				 		<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				 	</el-upload>
				 </div>
				</el-form-item>
			  <el-form-item label="文章标题：" :label-width="formLabelWidth" >
			    <el-input v-model="formwz.title" style="width:65%;"></el-input>
			  </el-form-item>
			  <el-form-item label="跳转链接：" :label-width="formLabelWidth" >
			    <el-input v-model="formwz.articleUrl" style="width:65%;"></el-input>
			  </el-form-item>
			  <el-form-item label="文章内容：" :label-width="formLabelWidth" >
			    <el-input type="textarea" rows="4" v-model="formwz.content"  style="width:65%;"></el-input>
			  </el-form-item>
			</el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible3 = false">取 消</el-button>
		    <el-button type="primary" @click="amendNoticeTowz()">确 定</el-button>
		  </div>
		</el-dialog>
	</el-tab-pane>
  </el-tabs>
</template>

<script>
	export default {
	    data() {
	      return {
				size:5,
				page:1,
				state:1,
				sort:0,
				remark:'',
				createTime:'',
				classifyName:'',
				id:'',
				classifyId:1,
				classifyIds: [],
				form:{
					id:'',
					state:'',
					sort:'',
					classifyName:'',
					remark:'',
					createTime:''
				},
				formwz:{
					id:'',
					picture:'',
					articleUrl:'',
					content:'',
					title:'',
					classifyId:'',
					createTime:''
				},
				info: {
					stockDate:this.getNowTime(),  //日期
				},
				picture:'',
				picture2:'',
				articleUrl:'',
				content:'',
				title:'',
				formLabelWidth:'200px',
				activeName: 'first',
				tableDataLoading:false,
				dialogFormVisible1:false,
				dialogFormVisible:false,
				dialogFormVisible2:false,
				dialogFormVisible3:false,
				tableData:[],
			}
		},
		methods: {
			//处理默认选中当前日期
			getNowTime() {
				 var now = new Date();
				 var year = now.getFullYear(); //得到年份
				 var month = now.getMonth(); //得到月份
				 var date = now.getDate(); //得到日期
				 var hh = now.getHours() < 10? "0" + now.getHours(): now.getHours();
			     var mm = now.getMinutes() < 10? "0" + now.getMinutes(): now.getMinutes();
			     var ss = now.getSeconds() < 10? "0" + now.getSeconds(): now.getSeconds();
				 month = month + 1;
				 month = month.toString().padStart(2, "0");
				 date = date.toString().padStart(2, "0");
				 var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`;
				 return defaultDate;
				 this.$set(this.info, "stockDate", defaultDate);
			},
			handleSizeChange(val) {
				this.size = val;
				this.dataSelect()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.dataSelect()
			},
			handleClick(tab, event) {
				if(tab._props.label=='分类管理'){
					this.dataSelect()
				}
				if(tab._props.label=='文章管理'){
					this.classifyId = 1
					this.articleSelect()
				}
			},
			handleAvatarSuccess(file) {
			     this.picture = file.data;
			 },
			 handleAvatarSuccess2(file2) {
			      this.formwz.picture = file2.data;
			  },
			// 添加分类弹框
			addNotice(){
				this.dialogFormVisible = true	
			},
			// 添加分类
			releasNoticeTo(){
				if (this.classifyName == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请选择分类名称',
				        type: 'warning'
				    });
				    return
				}
				if (this.remark == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请选择备注',
				        type: 'warning'
				    });
				    return
				}
				this.$http({
				  url: this.$http.adornUrl2('/article/saveArticleClassify'),
				  method: 'post',
				  data: this.$http.adornData({
				    'state': this.state,
					'sort' :this.sort,
					'remark':this.remark,
					'classifyName':this.classifyName,
					'createTime':this.info.stockDate,
				  })
				}).then(({data}) => {
					this.dialogFormVisible = false
				    this.$message({
				      message: '操作成功',
				      type: 'success',
				      duration: 1500,
				      onClose: () => {
				        this.dataSelect()
				      }
				    })
				})
			},
			// 编辑分类弹框
			updates(index,rows){
				this.form.state = rows.state;
				this.form.sort = rows.state;
				this.dialogFormVisible1=true;
				this.form.id = rows.id;
				this.form.classifyName = rows.classifyName;
				this.form.remark=rows.remark;
				this.form.createTime = rows.createTime;
			},
			// 修改商品类别
			amendNoticeTo(){
				this.$http({
				  url: this.$http.adornUrl2('/article/saveArticleClassify'),
				  method: 'post',
				  data: this.$http.adornData({
					'id':this.form.id,
					'state': this.form.state,
					'sort' : this.form.sort,
				    'classifyName': this.form.classifyName,
					'remark': this.form.remark,
					'createTime': this.info.stockDate,
				  })
				}).then(({data}) => {
					this.dialogFormVisible1 = false
				    this.$message({
				      message: '操作成功',
				      type: 'success',
				      duration: 1500,
				      onClose: () => {
						  this.dataSelect()
				      }
				    })
				})
			},
			// 删除分类
			deletes(row){
				let delid = row.id
				this.id = delid
				this.$confirm(`确定删除此条信息?`, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$http({
				    url: this.$http.adornUrl2(`/article/deleteArticleClassifyById?articleClassifyId=${this.id}`),
				    method: 'post',
				    data: this.$http.adornData({
				    })
				  }).then(({data}) => {
					  this.$message({
						message: '删除成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
						this.name = '';
						  this.dataSelect()
						}
					  })
				  })
				}).catch(() => {})
			},
			// 添加文章弹框
			addNoticewz(){
				this.dialogFormVisible2 = true
			},
			// 添加文章
			releasNoticeTowz(){
				if (this.title == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入文章标题',
				        type: 'warning'
				    });
				    return
				}
				if (this.articleUrl == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入跳转链接',
				        type: 'warning'
				    });
				    return
				}
				if (this.content == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入内容',
				        type: 'warning'
				    });
				    return
				}
				this.$http({
				  url: this.$http.adornUrl2('/article/addArticle'),
				  method: 'post',
				  data: this.$http.adornData({
					'articleUrl' :this.articleUrl,
					'classifyId':this.classifyId,
					'content':this.content,
					'createTime':this.info.stockDate,
					'picture': this.picture,
					'state':this.state,
					'title':this.title,	
				  })
				}).then(({data}) => {
					this.dialogFormVisible2 = false
				    this.$message({
				      message: '操作成功',
				      type: 'success',
				      duration: 1500,
				      onClose: () => {
						this.title = ''
						this.articleUrl = ''
						this.content = ''
						this.picture = ''
				        this.articleSelect()
				      }
				    })
				})
			},
			// 编辑文章弹框
			updateswz(index,rows){
				this.formwz.picture = rows.picture;
				this.dialogFormVisible3=true;
				this.formwz.id = rows.id;
				this.formwz.classifyId = rows.classifyId
				this.formwz.articleUrl = rows.articleUrl;
				this.formwz.content=rows.content;
				this.formwz.title=rows.title;
				this.formwz.createTime = rows.createTime;
			},
			// 修改商品类别
			amendNoticeTowz(){
				this.$http({
				  url: this.$http.adornUrl2('/article/addArticle'),
				  method: 'post',
				  data: this.$http.adornData({
					'id':this.formwz.id,
					'picture': this.formwz.picture,
				    'articleUrl': this.formwz.articleUrl,
					'content': this.formwz.content,
					'classifyId':this.formwz.classifyId,
					'title': this.formwz.title,
					'createTime': this.info.stockDate,
				  })
				}).then(({data}) => {
					this.dialogFormVisible3 = false
				    this.$message({
				      message: '操作成功',
				      type: 'success',
				      duration: 1500,
				      onClose: () => {
						  this.articleSelect()
				      }
				    })
				})
			},
			// 删除文章
			deleteswz(row){
				let delid = row.id
				this.id = delid
				this.$confirm(`确定删除此条信息?`, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$http({
				    url: this.$http.adornUrl2(`/article/deleteArticle?articleId=${this.id}`),
				    method: 'post',
				    data: this.$http.adornData({
				    })
				  }).then(({data}) => {
					  this.$message({
						message: '删除成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
						this.name = '';
						  this.articleSelect()
						}
					  })
				  })
				}).catch(() => {})
			},
			// 获取分类管理数据
			dataSelect () {
			  this.tableDataLoading = true
			  this.$http({
				url: this.$http.adornUrl2('article/selectArticleClassifyList'),
				method: 'get',
				params: this.$http.adornParams({
				})
			  }).then(({data}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.tableData = returnData
					this.classifyIds = returnData
			  })
			},
			// 获取文章管理数据
			articleSelect () {
			  this.tableDataLoading = true
			  this.$http({
				url: this.$http.adornUrl2('article/selectArticleList'),
				method: 'get',
				params: this.$http.adornParams({
					'classifyId':this.classifyId
				})
			  }).then(({data}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.tableData = returnData
			  })
			},
		},
		mounted() {
			this.dataSelect()
		}
	  };
</script>

<style>
	
</style>
